<template>
  <div class="room-title" v-wechat-title="roomTitles[parseInt(lottery_type)]">
    <div class="titleSlide">
      <div class="header">
        <div class="headerleft">
            <ul>
                <li>
                    <img :src="pcLogo" alt="" class="roomLogo">
                </li>
                <li>
                    <a href="#">
                      <img :src="roomNameImg" alt="" class="roomNameImg">
                    </a>
                </li>
                <li>
                    <!-- <a href="#">高级房</a>&nbsp;&nbsp;
                    <i></i> -->
                    <Dropdown trigger="click" @on-click='justGoOthoerRoom'>
                        <a>
                            {{MdStory == undefined ? roomData.title : MdStory}}
                            <Icon type="arrow-down-b"></Icon>
                        </a>
                        <DropdownMenu slot="list">
                            <DropdownItem :name="JSON.stringify(item)" v-for="item in roomAllData" :key="item.id">{{item.title}}</DropdownItem>
                        </DropdownMenu>
                    </Dropdown>
                </li>
            </ul>
        </div>
        <Modal
            v-model="passwdModel"
            title="请输入房间密码"
            :scrollable="true"
            :mask-closable="false"
            @on-ok="PrivacyRoom"
            @on-cancel="passwdModel = false"
            width="334"
            >
            <Input v-model="passwdModelvalue" type="password" placeholder="请输入房间密码" style="width: 300px"></Input>
        </Modal>
        <Modal
          v-model="tsDlg"
          :scrollable="true"
          class-name=""
          width="400"
          :mask-closable="false">
          <div class="tsBox">
            <img src="@/assets/images/czts.png" alt="">
            <div class="">该彩种已停售</div>
            <p>{{stopMsg}}</p>
            <!-- <p>{{roomTitles[parseInt(lottery_type) - 1]}}重新{{stopMsg}}，对您带来的不便，</p>
            <p>敬请谅解</p> -->
          </div>
          <div slot="footer">
              <Button @click="goHome" type="primary">返回</Button>            
          </div>
        </Modal>
        <div class="headerright">
            <div @click="goZouShi(0)" v-show="isPk10"><span></span>视频直播</div>          
            <div @click="goZouShi(1)"><span></span>开奖走势</div>
            <div @click="goZouShi(2)"><span></span>开奖结果</div>
            <div @click="goZouShi(3)"><span></span>彩票介绍</div>
        </div>
    </div>

    <div class="lotterylive">
        <div class="liveleft">
            <ul>
                <li></li>
                <template v-if="tsFlag">
                  <li>
                    <span>第<span>{{timeMessages.issue}}</span>期</span>
                    <span v-if="timersShow == 0">投注截止</span>    
                    <span v-else-if="timersShow == 1">已封盘，距开奖</span>    
                    <span v-else-if="timersShow == 2">开奖中</span>    
                  </li>
                  <li class="timers">
                    <span>{{timers.six}}</span>
                    <span>{{timers.five}}</span>
                    <span class="pointS">
                    <a></a>
                      <a></a>
                    </span>
                    <span>{{timers.four}}</span>
                    <span>{{timers.three}}</span>
                    <span class="pointS">
                    <a></a>
                      <a></a>
                    </span>
                    <span>{{timers.two}}</span>
                    <span>{{timers.one}}</span>
                  </li>
                </template>
                <template v-else>
                  <li class="sale-stop">
                    <span>已停售</span> 
                    <p>{{stopMsg}}</p>
                  </li>
                </template>
            </ul>
        </div>
        <div v-show="!showMiPai" class="rightPanel">
        <div class="liveright" v-if="lottery_type == 1 || lottery_type == 3||lottery_type==17||lottery_type==18||lottery_type==20||lottery_type == 22" @click="setLotteryList()">
            <ul v-if="lotteryList[0]" class="nomalUl">
                <li>
                    <span >第<a class="blueText">{{lotteryList[0].issue}}</a>期</span>
                    <span>
                      开奖结果
                    </span>
                </li>
                <li class="thenumber checkedStyle" id="lottRst">
                    <span class="clNum"><span><span :class="{slideNum:beginSlide,slideEnd1:!beginSlide}">{{beginSlide?ranDomNum[0]:lotteryList[0].spare_1.slice(0,2)}}</span></span></span>
                    <i class="fuhao">+</i>
                    <span class="clNum"><span><span :class="{slideNum:beginSlide,slideEnd2:!beginSlide}">{{beginSlide?ranDomNum[1]:lotteryList[0].spare_1.slice(3,5)}}</span></span></span>
                    <i class="fuhao">+</i>
                    <span class="clNum"><span><span :class="{slideNum:beginSlide,slideEnd3:!beginSlide}">{{beginSlide?ranDomNum[2]:lotteryList[0].spare_1.slice(6,8)}}</span></span></span>
                    <i class="fuhao">=</i>
                    <span class="jgNum" :class="`xyCszBox${beginSlide?ranDomNum[3]:lotteryList[0].open_result}`"><span><span :class="{slideNum:beginSlide,slideEnd4:!beginSlide}">{{beginSlide?ranDomNum[3]:lotteryList[0].open_result}}</span></span></span>
                    <span class="jgText28">{{beginSlide?'?,?':showLotteryText(lotteryList[0].open_result)}}</span>                    
                </li>
                <i class="sanjiao" :class="{rorateStyle:showLotteryList}" ></i>
            </ul>
            <!-- 开奖结果 -->
            <transition name="slide">
                <div class="theresult" v-show="showLotteryList">
                    <ul class="resultlist">
                        <li v-for="item in lotteryList">
                            <p class="periods">第<span class="blueText">{{item.issue}}</span>期</p>
                            <p class="number checkedStyle">
                                <span>{{item.spare_1.slice(0,2)}}</span>
                                <i class="fuhao">+</i>
                                <span>{{item.spare_1.slice(3,5)}}</span>
                                <i class="fuhao">+</i>                                
                                <span>{{item.spare_1.slice(6,8)}}</span>
                                <i class="fuhao">=</i>                                
                                <span class="sum" :class="`xyCszBox${item.open_result}`">{{item.open_result}}</span>
                            </p>
                            <p>{{showLotteryText(item.open_result)}}</p>
                        </li>
                    </ul>
                </div>
            </transition>
        </div>
        <div class="liveright" v-if="lottery_type == 2 || lottery_type == 4 || lottery_type == 9 || lottery_type == 14" @click="setLotteryList()">
          <ul v-if="lotteryList[0]" class="nomalUl">
                <li>
                    <span >第<a class="blueText">{{lotteryList[0].issue}}</a>期</span>
                    <span>
                      开奖结果
                    </span>
                </li>
                <li class="thenumber pk10" id="lottRst">
                    <span :class="showNumImg(beginSlide?ranDomNum[index]:item)" :key="index" v-for="(item,index) in lotteryList[0].open_result.split(',')"></span>
                </li>
                <i class="sanjiao" :class="{rorateStyle:showLotteryList}"></i>
            </ul>
            <!-- 开奖结果 -->
            <transition name="slide">
                <div class="theresult" v-show="showLotteryList">
                    <ul class="resultlist">
                        <li v-for="item in lotteryList">
                            <p class="periods">第<span class="blueText">{{item.issue}}</span>期</p>
                            <p >
                                <span style="margin-top:22px" :class="showNumImg(item)" :key="item" v-for="item in item.open_result.split(',')"></span>
                            </p>
                        </li>
                    </ul>
                </div>
            </transition>
        </div>
        <div class="liveright" v-if="lottery_type == 5 || lottery_type == 6 || lottery_type == 11||lottery_type == 21" @click="setLotteryList()">
          <ul v-if="lotteryList[0]" class="nomalUl">
                <li>
                    <span >第<a class="blueText">{{lotteryList[0].issue}}</a>期</span>
                    <span>
                      开奖结果
                    </span>
                </li>
                <div id="lottRst" class="sscMpPanel">
                  <li class="thenumber redBoxPanel">
                      <span v-for="(item,index) in lotteryList[0].open_result.split(',')"><span :class="showSlideNum(index,false)">{{beginSlide?ranDomNum[index]:item}}</span></span>
                  </li>
                  <li class="blueText" style="width:110px">(总和：{{beginSlide?'?,?,?':lotteryList[0].spare_2.toString()}})</li>
                </div>
                <i class="sanjiao" :class="{rorateStyle:showLotteryList}"></i>
            </ul>
            <!-- 开奖结果 -->
            <transition name="slide">
                <div class="theresult" v-show="showLotteryList">
                    <ul class="resultlist">
                        <li v-for="item in lotteryList">
                            <p class="periods">第<span class="blueText">{{item.issue}}</span>期</p>
                            <p class="redBoxPanel">
                                <span  v-for="item1 in item.open_result.split(',')">{{item1}}</span>
                            </p>
                            <p class="blueText">(总和：{{item.spare_2.toString()}})</p>
                        </li>
                    </ul>
                </div>
            </transition>
        </div>
        <div class="nnKjjg" v-if="lottery_type == 10 &&lotteryList.length>0">
          <ul>
            <li>
                <span >第<a class="blueText">{{lotteryList[0].issue}}</a>期</span>
                <span>
                  开奖结果
                </span>
            </li>
          </ul>
          <div @click="setLotteryList()" class="niuniuPanel" id="lottRst">
            <p><img src="@/assets/images/niuniu/vs_pic@2x.png" alt=""></p>
            <div class="blueLeft">
              <img src="@/assets/images/niuniu/niuniu_jiaobiao_pic@2x.png" v-show="beginSlide?false:lotteryList[0].who_win==0">
              <span>蓝</span>
              <div class="bluePai">
                <p><span>{{beginSlide?'':lotteryList[0].vs.blue.niu}}</span></p>
                <template v-for="item in lotteryList[0].vs.blue.pai">
                  <div v-for="item1 in pokeArr" v-if="item==item1.name" :class="showPaiClass(item1.url)"></div>
                </template>
              </div>
            </div>
            <div class="redRight">
              <img src="@/assets/images/niuniu/niuniu_jiaobiao_pic@2x.png" v-show="beginSlide?false:lotteryList[0].who_win==1">            
              <span>红</span>
              <div class="redPai">
                <p><span>{{beginSlide?'':lotteryList[0].vs.red.niu}}</span></p>
                <template v-for="item in lotteryList[0].vs.red.pai">
                  <div v-for="item1 in pokeArr" v-if="item==item1.name" :class="showPaiClass(item1.url)"></div>
                </template>
              </div>
              <img src="@/assets/images/niuniu/niuniu_up_icon@2x.png" :class="{'rorateImg':showLotteryList}" class="rorateImg1">
            </div>
          </div>
          <!-- 开奖结果 -->
          <transition name="slide">
              <div class="nnResult" v-show="showLotteryList" style="width: 520px;">
                  <ul class="resultlist">
                      <li v-for="item in lotteryList">
                          <p class="periods">第<span class="blueText">{{item.issue}}</span>期</p>
                          <div>
                            <template v-for="item in item.win_pai">
                              <div v-for="item1 in pokeArr" v-if="item==item1.name" :class="item1.url"></div>
                            </template>
                          </div>
                          <!-- sbht -->
                          <p><span :class="{'redText':item.who_win==1}" class="blueText sbht">{{item.open_result_another.split(',')[0]}}</span>{{item.open_result_another.split(',')[1]}}</p>
                      </li>
                  </ul>
              </div>
          </transition>
        </div>
        <div class="lhcPanel" v-if="(lottery_type == 7 || lottery_type == 8) && lotteryList.length>0" @click="setLotteryList()">
          <ul>
            <li>
              <span >第<a class="blueText">{{lotteryList[0].issue}}</a>期</span>
              <span>开奖结果</span>
            </li>
          </ul>
          <div class="colorPanel" id="lottRst">
            <div class="colorBox" v-for="(item,index) in lotteryList[0].spare_2">
              <div :class="`cszBox${beginSlide?ranDomNum[index]:lotteryList[0].open_result.split(',')[index]}`" class="cszBox"><span :class="showSlideNum(index,true)">{{beginSlide?ranDomNum[index]:lotteryList[0].open_result.split(',')[index]}}</span></div>
              <div>{{beginSlide?'?':item}}</div>
            </div>
            <div class="jiaHao">+</div>
            <div class="colorBox checkedStyle">
              <div class="cszBox" :class="`cszBox${beginSlide?ranDomNum[6]:lotteryList[0].te_ma_obj.num}`"><span :class="showSlideNum(6,true)">{{beginSlide?ranDomNum[6]:lotteryList[0].te_ma_obj.num}}</span></div>
              <div>{{beginSlide?'?':lotteryList[0].te_ma_obj.title}}</div>
            </div>
          </div>
          <div class="sanjiao" :class="{rorateStyle:showLotteryList}"></div>
          <transition name="slide">
              <div class="lhcResult" v-show="showLotteryList">
                  <ul class="resultlist">
                      <li v-for="item in lotteryList">
                          <p class="periods">第<span class="blueText">{{item.issue}}</span>期</p>
                          <div class="colorPanel">
                            <div class="colorBox" v-for="(item1,index1) in item.spare_2">
                              <div :class="`cszBox${item.open_result.split(',')[index1]}`" class="cszBox">{{item.open_result.split(',')[index1]}}</div>
                              <div>{{item1}}</div>
                            </div>
                            <div class="jiaHao">+</div>
                            <div class="colorBox checkedStyle">
                              <div class="cszBox" :class="`cszBox${item.te_ma_obj.num}`">{{item.te_ma_obj.num}}</div>
                              <div>{{item.te_ma_obj.title}}</div>
                            </div>
                          </div>
                      </li>
                  </ul>
              </div>
          </transition>
        </div>
        <div class="lhcPanel" v-if="(lottery_type == 13||lottery_type == 19) && lotteryList.length>0" @click="setLotteryList()">
          <ul>
            <li>
              <span >第<a class="blueText">{{lotteryList[0].issue}}</a>期</span>
              <span>开奖结果</span>
            </li>
          </ul>
          <div class="sbPanel" id="lottRst">
            <div>
              <div class="colorBox" v-for="(item,index) in lotteryList[0].open_result">
                <div :class="`sbBox${beginSlide?ranDomNum[index]:lotteryList[0].open_result.split(',')[index]}`" class="sbBox"></div>
              </div>
            </div>
            <div v-if="lotteryList[0].open_result == '1,1,1' || lotteryList[0].open_result == '6,6,6'">{{beginSlide?'总和:？,？,？':'豹子: ' + lotteryList[0].spare_2[0].substring(2)}}</div>
            <div v-else>总和：{{beginSlide?'？,？,？':lotteryList[0].spare_2.join(",")}}</div>
          </div>
          <div class="sanjiao" :class="{rorateStyle:showLotteryList}"></div>
          <transition name="slide">
              <div class="lhcResult sbResult" v-show="showLotteryList">
                  <ul class="resultlist">
                      <li v-for="item in lotteryList">
                          <p class="periods">第<span class="blueText">{{item.issue}}</span>期</p>
                          <div class="sbPanel">
                            <div>
                              <div class="colorBox" v-for="(item1,index1) in item.open_result.split(',')">
                                <div :class="`sbBox${item.open_result.split(',')[index1]}`" class="sbBox"></div>
                              </div>
                            </div>
                            <div v-if="item.open_result == '1,1,1' || item.open_result == '6,6,6'">{{beginSlide?'总和:？,？,？':'豹子: ' + item.spare_2[0].substring(2)}}</div>
                            <div v-else>总和：{{item.spare_2.join(",")}}</div>                          
                          </div>
                      </li>
                  </ul>
              </div>
          </transition>
        </div>
        </div>
    </div>
  </div>
  
  <iframe src="" frameborder="0" v-show="isPk10&&showIframe" id="iframe"></iframe>
  <div class="closeIframe" v-show="isPk10&&showIframe" @click="showIframe=false">收起视频</div>
  <mipai :issue="lotteryList[0]?lotteryList[0].issue:''" :lottRstHtml="lottRstHtml" v-show="showMiPai" :showMiPai="showMiPai" v-on:setmpFlag="setmpFlagFun" :timersShow="timersShow"></mipai>
  </div>
</template>

<script>
import _ from "lodash";
import router from "@/router";
import mipai from "./mipai/mipai";
import { fetchJson } from "@/common/js/request";
import { mapGetters, mapActions } from "vuex";
import roomName1 from '../../../assets/images/room/roomName1.png';
import roomName2 from '../../../assets/images/room/roomName2.png';
import roomName3 from '../../../assets/images/room/roomName3.png';
import roomName4 from '../../../assets/images/room/roomName4.png';
import roomName5 from '../../../assets/images/room/roomName5.png';
import roomName6 from '../../../assets/images/room/roomName6.png';
import roomName7 from '../../../assets/images/room/roomName7.png';
import roomName8 from '../../../assets/images/room/roomName8.png';
import roomName9 from '../../../assets/images/room/roomName9.png';
import roomName10 from '../../../assets/images/room/roomName10.png';
import roomName11 from '../../../assets/images/room/roomName11.png';
import roomName13 from '../../../assets/images/room/roomName13.png';
import roomName14 from '../../../assets/images/room/roomName14.png';
import xjp28Name from '../../../assets/images/room/xjp28-name.png';
import rd28Name from '../../../assets/images/room/rd28-name.png';
import cq28Name from '../../../assets/images/room/cq28-name.png';
import jsksName from '../../../assets/images/room/jsks-name.png';
import txffcName from '../../../assets/images/room/txffc-name.png';
import tx28Name from '../../../assets/images/room/tx28-name.png';
import roomLogo1 from '../../../assets/images/room/lucky28.png';
import roomLogo2 from '../../../assets/images/room/pk10.png';
import roomLogo3 from '../../../assets/images/room/canada28.png';
import roomLogo4 from '../../../assets/images/room/luckyship.png';
import roomLogo5 from '../../../assets/images/room/ssc.png';
import roomLogo6 from '../../../assets/images/room/minmin.png';
import roomLogo7 from '../../../assets/images/room/six.png';
import roomLogo8 from '../../../assets/images/room/six2.png';
import roomLogo9 from '../../../assets/images/room/car.png';
import roomLogo10 from '../../../assets/images/room/nn.png';
import roomLogo13 from '../../../assets/images/room/roomLogo13.png';
import roomLogo14 from '../../../assets/images/room/roomLogo14.png';
import xjp28Logo from '../../../assets/images/room/xjp28.png';
import rd28Logo from '../../../assets/images/room/rd28.png';
import cq28Logo from '../../../assets/images/room/cq28.png';
import jsksLogo from '../../../assets/images/room/jsks.png';
import txffcLogo from '../../../assets/images/room/txffc.png';
import tx28Logo from '../../../assets/images/room/tx28.png';
export default {
  props: ["timeMessages", "cRoomData", "lotteryData", "newLotResult"],
  data() {
    return {
      showIframe: false,
      isPk10: false,
      tsFlag: true, //停售
      stopMsg: "",
      roomData: {},
      roomAllData: [],
      pcLogo: "",
      lotteryList: [],
      showLotteryList: false,
      newResult: {},
      beginSlide: true, //开奖结果开始动
      ranDomNum: [],
      lottery_type: null, //记录彩种类型
      timers: {
        one: 0,
        two: 0,
        three: 0,
        four: 0,
        five: 0,
        six: 0,
        one1: 0,
        two1: 0,
        three1: 0,
        four1: 0,
        five1: 0,
        six1: 0
      },
      timer: null,
      timer1: null,
      timersShow: 0,
      passwdModel: false,
      passwdModelvalue: null,
      passwdModelSendMes: null,
      roomTitles: {
        1:"幸运28",
        2:"北京PK10",
        3:"加拿大28",
        4:"幸运飞艇",
        5:"重庆时时彩",
        6:"三分彩",
        7:"香港六合彩",
        8:"急速六合彩",
        9:"急速赛车",
        10:"百人牛牛",
        11:"分分彩",
        13:"骰宝",
        14:"分分pk10",
        17:"新加坡28",
        18:"瑞典28",
        19:"江苏快三",
        20:"重庆28",
        22:"腾讯28",
        21:"腾讯分分彩",
      },
      MdStory: null,
      pokeArr: [
        { name: "黑桃A", url: "poker1_1" },
        { name: "黑桃2", url: "poker2_1" },
        { name: "黑桃3", url: "poker3_1" },
        { name: "黑桃4", url: "poker4_1" },
        { name: "黑桃5", url: "poker5_1" },
        { name: "黑桃6", url: "poker6_1" },
        { name: "黑桃7", url: "poker7_1" },
        { name: "黑桃8", url: "poker8_1" },
        { name: "黑桃9", url: "poker9_1" },
        { name: "黑桃10", url: "poker10_1" },
        { name: "黑桃J", url: "poker11_1" },
        { name: "黑桃Q", url: "poker12_1" },
        { name: "黑桃K", url: "poker13_1" },
        { name: "红心A", url: "poker1_2" },
        { name: "红心2", url: "poker2_2" },
        { name: "红心3", url: "poker3_2" },
        { name: "红心4", url: "poker4_2" },
        { name: "红心5", url: "poker5_2" },
        { name: "红心6", url: "poker6_2" },
        { name: "红心7", url: "poker7_2" },
        { name: "红心8", url: "poker8_2" },
        { name: "红心9", url: "poker9_2" },
        { name: "红心10", url: "poker10_2" },
        { name: "红心J", url: "poker11_2" },
        { name: "红心Q", url: "poker12_2" },
        { name: "红心K", url: "poker13_2" },
        { name: "梅花A", url: "poker1_3" },
        { name: "梅花2", url: "poker2_3" },
        { name: "梅花3", url: "poker3_3" },
        { name: "梅花4", url: "poker4_3" },
        { name: "梅花5", url: "poker5_3" },
        { name: "梅花6", url: "poker6_3" },
        { name: "梅花7", url: "poker7_3" },
        { name: "梅花8", url: "poker8_3" },
        { name: "梅花9", url: "poker9_3" },
        { name: "梅花10", url: "poker10_3" },
        { name: "梅花J", url: "poker11_3" },
        { name: "梅花Q", url: "poker12_3" },
        { name: "梅花K", url: "poker13_3" },
        { name: "方块A", url: "poker1_4" },
        { name: "方块2", url: "poker2_4" },
        { name: "方块3", url: "poker3_4" },
        { name: "方块4", url: "poker4_4" },
        { name: "方块5", url: "poker5_4" },
        { name: "方块6", url: "poker6_4" },
        { name: "方块7", url: "poker7_4" },
        { name: "方块8", url: "poker8_4" },
        { name: "方块9", url: "poker9_4" },
        { name: "方块10", url: "poker10_4" },
        { name: "方块J", url: "poker11_4" },
        { name: "方块Q", url: "poker12_4" },
        { name: "方块K", url: "poker13_4" }
      ],
      slideTimer: {},
      tsDlg: false,
      lottRstHtml: "",
      isAuthRoom: 0,
      roomNameImg: '',
    };
  },
  created() {
    this.lottery_type = this.$route.query.lottery_type;
    if (
      this.lottery_type == 2 ||
      this.lottery_type == 4
    ) {
      this.isPk10 = true;
    }
    switch (parseInt(this.lottery_type)) {
      case 1:
        this.pcLogo=roomLogo1
        this.roomNameImg=roomName1
        break;
      case 2:
        this.pcLogo=roomLogo2
        this.roomNameImg=roomName2     
        break;
      case 3:
        this.pcLogo=roomLogo3
        this.roomNameImg=roomName3       
        break;
      case 4:
        this.pcLogo=roomLogo4
        this.roomNameImg=roomName4
        break;
      case 5:
        this.pcLogo=roomLogo5
        this.roomNameImg=roomName5  
        break;
      case 6:
        this.pcLogo=roomLogo6
        this.roomNameImg=roomName6
        break;
      case 7:
        this.pcLogo=roomLogo7
        this.roomNameImg=roomName7
        break;
      case 8:
        this.pcLogo=roomLogo8
        this.roomNameImg=roomName8
        break;
      case 9:
        this.pcLogo=roomLogo9
        this.roomNameImg=roomName9
        break;
      case 10:
        this.pcLogo=roomLogo10
        this.roomNameImg=roomName10
        break;
      case 11:
        this.pcLogo=roomLogo6
        this.roomNameImg=roomName11
        break;
      case 13:
        this.pcLogo=roomLogo13
        this.roomNameImg=roomName13
        break;
      case 14:
        this.pcLogo=roomLogo14
        this.roomNameImg=roomName14
        break;
      case 17:
        this.pcLogo=xjp28Logo
        this.roomNameImg=xjp28Name
        break;
      case 18:
        this.pcLogo=rd28Logo
        this.roomNameImg=rd28Name
        break;
      case 20:
        this.pcLogo=cq28Logo
        this.roomNameImg=cq28Name
        break;
      case 22:
        this.pcLogo=tx28Logo
        this.roomNameImg=tx28Name
        break;
      case 19:
        this.pcLogo=jsksLogo
        this.roomNameImg=jsksName
        break;
      case 21:
        this.pcLogo=txffcLogo
        this.roomNameImg=txffcName
        break;
      
      default:
        this.pcLogo=roomLogo1
        this.roomNameImg=roomName1 
        break;
    }
    this.MdStory = localStorage.getItem("MdStory");
    localStorage.removeItem("MdStory");
  },
  mounted() {},
  computed: {
    ...mapGetters(["getHeaderFooter", "accountData","showMiPai"])
  },

  methods: {
    mipai: function() {
      if(_.isEmpty(this.lotteryList[0])){
        return
      } 
      this.beginSlide=false
      setTimeout(() => {
        if(document.getElementById("lottRst")){
          var rstHtml = document.getElementById("lottRst").outerHTML;
        }
        this.lottRstHtml = rstHtml;
      },100)
    },
    setmpFlagFun: function(flag){
      this.$store.commit('setShowMiPai',flag)      
    },
    goHome: function() {
      router.push({
        name: "Home",
        path: "/home"
      });
    },
    slideNum: function() {
      //开始滚动
      var that = this;
      setTimeout(function() {
        that.beginSlide = false;
      }, 5000);
    },
    setRandomNum: function() {
      //设置随机数
      var that = this;
      this.slideTimer = setInterval(function() {
        if (that.lottery_type == 1 || that.lottery_type == 3 ||that.lottery_type==17||that.lottery_type==18||that.lottery_type==20||that.lottery_type == 22) {
          let newArr = [];
          for (var i = 0; i < 4; i++) {
            newArr.push(parseInt(27 * Math.random()));
          }
          that.ranDomNum = newArr;
        } else if (
          that.lottery_type == 2 ||
          that.lottery_type == 4 ||
          that.lottery_type == 9 ||
          that.lottery_type == 14
        ) {
          let newArr = [];
          for (var i = 0; i < 10; i++) {
            newArr.push(Math.floor(10 * Math.random() + 1));
          }
          that.ranDomNum = newArr;
        } else if (
          that.lottery_type == 5 ||
          that.lottery_type == 6 ||
          that.lottery_type == 11||
          that.lottery_type == 21
        ) {
          let newArr = [];
          for (var i = 0; i < 5; i++) {
            newArr.push(parseInt(9 * Math.random()));
          }
          that.ranDomNum = newArr;
        } else if (that.lottery_type == 7 || that.lottery_type == 8) {
          let newArr = [];
          for (var i = 0; i < 7; i++) {
            newArr.push(Math.floor(49 * Math.random() + 1));
          }
          that.ranDomNum = newArr;
        } else if (that.lottery_type == 13 || that.lottery_type == 19) {
          let newArr = [];
          for (var i = 0; i < 3; i++) {
            newArr.push(Math.floor(5 * Math.random() + 1));
          }
          that.ranDomNum = newArr;
        }
      }, 200);
    },
    showLotteryText: function(num) {
      //显示猜双面
      let dxString = [];
      if (num <= 13) {
        dxString.push("小");
      } else {
        dxString.push("大");
      }
      if (num % 2 == 0) {
        dxString.push("双");
      } else {
        dxString.push("单");
      }
      return dxString.join(",");
    },
    showSlideNum(index, flag) {
      if (flag) {
        if (this.beginSlide) {
          return "slideNum1";
        } else {
          return "lhcSlideEnd" + (index + 1);
        }
      } else {
        if (this.beginSlide) {
          return "slideNum";
        } else {
          return "slideEnd" + (index + 1);
        }
      }
    },
    showPaiClass(url) {
      //牛牛动画绑定
      if (this.beginSlide) {
        return "nomalPai";
      } else {
        return [url, "roratePai"];
      }
    },
    showNumImg(num) {
      var colorArr = [
        "px-01",
        "px-02",
        "px-03",
        "px-04",
        "px-05",
        "px-06",
        "px-07",
        "px-08",
        "px-09",
        "px-10"
      ];
      var sleNum = parseInt(num) - 1;
      var result = colorArr[sleNum];
      return result;
    },
    setLotteryList: function() {
      this.showLotteryList = !this.showLotteryList;
    },
    goZouShi: function(flag) {
      if (flag == 1) {
        //开奖走势
        window.open(
          this.imgRequest +
            "/pczs/Trendssc/trendHeader.html?trendType=basic&lotteryId=" +
            this.lottery_type
        );
      } else if (flag == 0) {
        //视频直播
        if(this.showIframe){
          this.showIframe=false
          return
        }else{
          this.showIframe=true
        }
        var iframe = document.getElementById('iframe')
        var protoCol = window.location.protocol
        if(this.lottery_type==4){
          iframe.setAttribute('src',protoCol+'//www.1818kai.com/vxyft/')
        }else if(this.lottery_type==2){
          iframe.setAttribute('src',protoCol+'//www.1818kai.com/vbjpk10/') 
        }
      } else if (flag == 2) {
        //开奖历史
        window.open(
          this.imgRequest +
            "/pczs/Trendssc/trendHeader.html?trendType=history&lotteryId=" +
            this.lottery_type
        );
      } else if (flag == 3) {
        let lottery_list = this.getHeaderFooter.lottery_list;
        let navIndex = 0;
        let article_id = 0;
        for (var i = 0; i < lottery_list.length; i++) {
          if (this.lottery_type == lottery_list[i].lottery_type) {
            article_id = lottery_list[i].article_id;
          }
        }
        // if (this.lottery_type == 1) {
        //   navIndex = 0;
        // } else if (this.lottery_type == 3) {
        //   navIndex = 1;
        // } else if (this.lottery_type == 2) {
        //   navIndex = 2;
        // } else if (this.lottery_type == 4) {
        //   navIndex = 3;
        // } else if (this.lottery_type == 5) {
        //   navIndex = 4;
        // } else if (this.lottery_type == 6) {
        //   navIndex = 5;
        // } else if (this.lottery_type == 7) {
        //   navIndex = 6;
        // } else if (this.lottery_type == 8) {
        //   navIndex = 7;
        // } else if (this.lottery_type == 9) {
        //   navIndex = 8;
        // } else if (this.lottery_type == 10) {
        //   navIndex = 9;
        // }
        router.push({
          path: "/article/howToPlay",
          query: { lottery: this.lottery_type, id: article_id }
        });
      }
    },
    justGoOthoerRoom: function(item) {
      //跳转房间
      item = JSON.parse(item);
      var lottery_type = item.lottery_type;
      var id = item.id;
      var pwd = item.passwd;
      var maxYb = parseInt(item.max_yb);
      var lowYb = parseInt(item.low_yb);
      var tips = item.lack_tips;
      var userMoney = parseInt(this.accountData.money);
      if (pwd != "" && pwd != undefined) {
        this.passwdModel = true;
        this.passwdModelSendMes = item;
        // console.log(this.passwdModelSendMes)
      } else {
        if(maxYb<userMoney || userMoney<lowYb){
          if(_.isEmpty(tips)){
            this.$Message.warning('进入失败，请稍后重试');
          }else{
            this.$Message.warning(tips);
          }      
            return false;
        }
        if(this.isAuthRoom!=0){
          this.$Message.info({
            content:'抱歉，您未开启当前房间权限！',
          })
          return false
        }
        router.push({
          name: "Room",
          path: "/room/" + id,
          params: { lottery_type: lottery_type, id: id },
          query: {id: id,lottery_type: lottery_type}
        });
        //更新房间数据
        location.reload();
      }
    },
    PrivacyRoom() {
      //私密房间
      let that = this;
      fetchJson(this, "?m=api&c=lobby&a=privateRoom", {
        lottery_type: that.passwdModelSendMes.lottery_type,
        secret_pwd: that.passwdModelvalue
      }).then(result => {
        if (result.status === 0) {
          if (result.data.passwd === that.passwdModelvalue) {
            localStorage.setItem("MdStory", "私密房间");
            //密码正确
            router.push({
              name: "Room",
              path: "/room/" + result.data.id,
              params: {
                lottery_type: that.passwdModelSendMes.lottery_type,
                id: result.data.id
              },
              query: {id: result.data.id,lottery_type: that.passwdModelSendMes.lottery_type}
            });
            location.reload();
          } else {
            this.$Message.warning("房间密码错误");
          }
        } else {
          this.$Message.warning("房间密码错误");
        }
      });
    },
    addBetTimer(data) {
      var tzTime =  parseInt(data.time) - parseInt(data.sealingTim)//投注倒计时
      var fpTime = parseInt(data.sealingTim)//封盘倒计时
      if(parseInt(data.time)<parseInt(data.sealingTim)){
        fpTime=parseInt(data.time)
      }
      var that = this
      clearInterval(that.timer)
      this.timer = setInterval(() => {
        if (tzTime > 0) {//投注中
          this.timersShow = 0
          this.$store.commit("setStopBet", false)
          this.playFpMusic = false
          if(tzTime>0){
            tzTime--
            this.setTimer(tzTime)
          }
        } else if(fpTime>0&&tzTime<=1){
            that.timers.one = 0;
            that.timers.two = 0;
            that.timers.three = 0;
            that.timers.four = 0;
            that.timers.five = 0;
            that.timers.six = 0;
            that.timersShow = 1;
            that.playFpMusic = true;
            that.$store.commit("setStopBet", true);
            fpTime--
            that.setTimer(fpTime,true);
          }
        }, 1000)
    },
    setTimer: function(time,flag){
      let hourTime = 0
      let minTime = 0
      let senTime = 0
      if(time<1&&flag){
        this.timersShow = 2
        this.$store.commit("setStopBet", true);
      }
      if (time <= 60) {
        this.timers.one = parseInt(time % 10)
        this.timers.two = parseInt(time / 10)
        this.timers.three = 0
        this.timers.four = 0
        this.timers.five = 0
        this.timers.six = 0
      } else if (time > 60 && time < 60 * 60) {
        minTime = parseInt(time / 60.0)
        senTime = parseInt(
          (parseFloat(time / 60.0) - parseInt(time / 60.0)) * 60
        )
        this.timers.two = parseInt(senTime / 10)
        this.timers.one = parseInt(senTime % 10)
        this.timers.four = parseInt(minTime / 10)
        this.timers.three = parseInt(minTime % 10)
        this.timers.five = 0
        this.timers.six = 0
      } else if (time >= 60 * 60) {
          hourTime = parseInt(time / 3600.0)
          minTime = parseInt(
          (parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60
          )
          senTime = parseInt(
          (parseFloat(
            (parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60
          ) -
            parseInt(
            (parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60
            )) *
            60
          )
          this.timers.two = parseInt(senTime / 10)
          this.timers.one = parseInt(senTime % 10)
          this.timers.four = parseInt(minTime / 10)
          this.timers.three = parseInt(minTime % 10)
          this.timers.six = parseInt(hourTime / 10)
          this.timers.five = parseInt(hourTime % 10)
      }
    },
  },
  components: { mipai: mipai },
  watch: {
    cRoomData: function(oldVal, newVal) {
      if(_.isEmpty(oldVal)){
        return
      }
      this.isAuthRoom=oldVal.isAuthRoom
      if (!_.isEmpty(oldVal)) {
        this.roomAllData = oldVal.p_room;
        for (var i = 0; i < oldVal.p_room.length; i++) {
          if (oldVal.p_room[i].id == this.$route.query.id) {
            this.roomData = oldVal.p_room[i];
          }
        }
      }
    },
    lotteryData: function(oldVal, newVal) {
      if (!_.isEmpty(oldVal)) {
        this.lotteryList = oldVal;
        this.slideNum();
        this.setRandomNum();
        if (this.lottery_type == 7 || this.lottery_type == 8) {
          for (var i = 0; i < this.lotteryList.length; i++) {
            this.lotteryList[i].spare_2.pop();
          }
        }
        console.log(this.lotteryList, "lotteryList");
      }
    },
    newLotResult: function(oldVal, newVal) {
      if (!_.isEmpty(oldVal)) {
        if (this.lottery_type == 3 || this.lottery_type == 1 ||this.lottery_type==17||this.lottery_type==18||this.lottery_type==20||this.lottery_type == 22) {
          let data = {
            issue: oldVal.issue,
            open_result: oldVal.result.slice(9, 11),
            spare_1: oldVal.result.slice(0, 8)
          };

          this.lotteryList.unshift(data);
        } else if (
          this.lottery_type == 2 ||
          this.lottery_type == 4 ||
          this.lottery_type == 9 ||
          this.lottery_type == 14
        ) {
          let data = {
            issue: oldVal.issue,
            open_result: oldVal.result,
            open_time: oldVal.open_time,
            spare_2: ""
          };
          this.lotteryList.unshift(data);
        } else if (
          this.lottery_type == 5 ||
          this.lottery_type == 6 ||
          this.lottery_type == 11||
          this.lottery_type == 21
        ) {
          let data = {
            issue: oldVal.issue,
            open_result: oldVal.result,
            open_time: oldVal.open_time,
            spare_2: oldVal.sum_result_str.split(",")
          };
          this.lotteryList.unshift(data);
        } else if (this.lottery_type == 10) {
          let data = {
            issue: oldVal.issue,
            open_result_another: oldVal.sum_result_str,
            who_win: oldVal.sum_result_str.substr(0, 3) == "红方胜" ? 1 : 0,
            win_pai:
              oldVal.sum_result_str.substr(0, 3) == "红方胜"
                ? oldVal.result
                    .split("|")[1]
                    .slice(3)
                    .split(",")
                : oldVal.result
                    .split("|")[0]
                    .slice(3)
                    .split(","),
            vs: {
              blue: {
                niu: oldVal.niu.blue_niu,
                pai: oldVal.result
                  .split("|")[0]
                  .slice(3)
                  .split(",")
              },
              red: {
                niu: oldVal.niu.red_niu,
                pai: oldVal.result
                  .split("|")[1]
                  .slice(3)
                  .split(",")
              }
            }
          };
          this.lotteryList.unshift(data);
        } else if (this.lottery_type == 7 || this.lottery_type == 8) {
          // let data = {
          //   issue: oldVal.issue,
          //   open_result: oldVal.result,
          //   spare_2: oldVal.sum_result_str.split(','),
          //   te_ma_obj: {num: oldVal.result.split(',')[oldVal.result.split(',').length-1], title: oldVal.sum_result_str.split(',')[oldVal.sum_result_str.split(',').length-1]}
          // };
          // this.lotteryList.unshift(data);
          //获取开奖历史
          let result = fetchJson(this, "?m=api&c=openAward&a=roomDataList", {
            lottery_type: this.$route.query.lottery_type
          }).then(result => {
            if (_.isEmpty(result)) {
              return;
            }
            this.lotteryList = result.list;
            for (var i = 0; i < this.lotteryList.length; i++) {
              this.lotteryList[i].spare_2.pop();
            }
          });
        }else if(this.lottery_type == 13 ||this.lottery_type == 19){
          let data = {
            issue: oldVal.issue,
            open_result: oldVal.result,
            open_time: oldVal.open_time,
            spare_2: oldVal.sum_result_str.split(",")
          };
          this.lotteryList.unshift(data);
        }
        if(this.showMiPai){
          var that = this
          setTimeout(function(){
            if(document.getElementById("lottRst")){
              var rstHtml = document.getElementById("lottRst").outerHTML;
            }
            that.lottRstHtml = rstHtml;
          },1000)
        }else{
          this.slideNum();
          this.beginSlide = true;
        }
        
        
        
      }
    },
    showMiPai: function(newVal, oldVal){
      if(newVal){
        this.mipai()
      }
    },
    timeMessages: function(newVal, oldVal) {
      if (newVal.stopOrSell == 2) {
        //停售
        this.tsFlag = false;
        this.tsDlg = true;
        this.stopMsg = newVal.stopMsg;
        // this.stopMsg = newVal.stopMsg.split("，")[1];
      }
      var time = parseInt(newVal.time);
      this.addBetTimer(newVal);
    },
    beginSlide: {
      handler(newVal, oldVal) {
        if (newVal==false) {
          clearInterval(this.slideTimer);
        }
      },
      deep: true
    }
  },
  deactivated() {},
  beforeDestroy() {}
};
</script>

<style scoped>
.closeIframe{position: absolute;right: 10px;top: 104px;background: #ff8400;color: white;z-index: 99;cursor: pointer;padding: 3px 10px;border-radius: 5px;}
#iframe{position: absolute;right: 0px;width: 606px;top: 54px;z-index: 98;height: 400px;}
.titleSlide{margin-top: -150px;animation: titleSlide 1s forwards;}
@keyframes titleSlide {
  0%{}
  100%{margin-top: 0px;}
}
.roomNameImg{vertical-align: bottom;}
.jgText28{margin-left: 10px;}
.sscMpPanel{width: 400px;display: flex;}
.sscMpPanel span{line-height: 36px;align-items: center;}
.sscMpPanel .blueText{line-height: 60px;}
.rightPanel{height: 100%;float: right;}

.tsBox img {
  display: block;
  margin: 0 auto;
}
.tsBox div {
  color: #5db2ff;
  font-size: 21px;
  text-align: center;
  margin: 10px 0px;
}
.tsBox p {
  text-align: center;
  margin: 0 auto;
  font-size: 14px;
}
@keyframes slideNum {
  0% {
    transform: translateY(-24px);
  }
  100% {
    transform: translateY(24px);
  }
}
@keyframes slideNum1 {
  0% {
    transform: translateY(-14px);
  }
  100% {
    transform: translateY(14px);
  }
}
@keyframes slideEnd {
  0% {
    transform: translateY(-24px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes slideEnd1 {
  0% {
    transform: translateY(-18px);
  }
  100% {
    transform: translateY(0px);
  }
}
/* .clNum>span,.jgNum>span{display: inline-block;overflow: hidden;height: 24px;line-height: 24px;margin-top: 5px;} */
.slideNum {
  animation: slideNum 0.2s infinite linear;
}
.slideNum1 {
  animation: slideNum1 0.2s infinite linear;
}
.slideEnd1 {
  animation: slideEnd 2s forwards;
}
.slideEnd2 {
  animation: slideEnd 2.5s forwards;
}
.slideEnd3 {
  animation: slideEnd 3s forwards;
}
.slideEnd4 {
  animation: slideEnd 3.5s forwards;
}
.slideEnd5 {
  animation: slideEnd 4s forwards;
}
.lhcSlideEnd1 {
  animation: slideEnd1 2s forwards;
}
.lhcSlideEnd2 {
  animation: slideEnd1 2.5s forwards;
}
.lhcSlideEnd3 {
  animation: slideEnd1 3s forwards;
}
.lhcSlideEnd4 {
  animation: slideEnd1 3.5s forwards;
}
.lhcSlideEnd5 {
  animation: slideEnd1 4s forwards;
}
.lhcSlideEnd6 {
  animation: slideEnd1 4.5s forwards;
}
.lhcSlideEnd7 {
  animation: slideEnd1 5s forwards;
}
.room-title .header {
  height: 54px;
  background-color: #48484c;
}
.room-title .header .headerleft {
  margin: 9px 0;
  float: left;
  height: 36px;
}
.room-title .header .headerleft ul {
  margin-left: 13px;
  height: 36px;
}
.room-title .header .headerleft ul li {
  float: left;
  margin-right: 15px;
  font-size: 14px !important;
}
.room-title .header .headerleft ul li a {
  font-size: 22px;
  font-weight: 600;
  font-family: PingFangSC;
  line-height: 36px;
  color: white;
}
/* .room-title .header .headerleft ul li:last-child i {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: url('../../../assets/images/spirt.png') 0 42px;
    } */
.room-title .header .headerright {
  float: right;
  margin: 9px 0;
  height: 36px;
  margin-right: 20px;
}
.headerright > div {
  float: left;
  margin: 0px 8px;
  line-height: 36px;
  color: white;
  cursor: pointer;
}
.headerright > div:nth-child(1) > span {
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
  /* background: url("../../../assets/images/olplay.png")no-repeat; */
  margin-right: 4px;
}
.headerright > div:nth-child(2) > span {
  width: 18px;
  height: 14px;
  display: inline-block;
  /* background: url("../../../assets/images/spirt.png")0px 266px; */
  margin-right: 4px;
}
.headerright > div:nth-child(3) > span {
  width: 18px;
  height: 16px;
  display: inline-block;
  /* background: url("../../../assets/images/spirt.png")0px 284px; */
  margin-right: 4px;
  vertical-align: middle;
}
.headerright > div:nth-child(4) > span {
  width: 18px;
  height: 16px;
  display: inline-block;
  /* background: url("../../../assets/images/spirt.png")0px 304px; */
  margin-right: 4px;
  vertical-align: middle;
}
.room-title .lotterylive {
  border-bottom: 1px solid #eee;
  height: 56px;
  background-color: #fff;
}
.room-title .lotterylive .liveleft {
  float: left;
}
.room-title .lotterylive .liveleft ul li {
  float: left;
  margin-right: 10px;
}
.room-title .lotterylive .liveleft ul li.sale-stop {
  max-width: 450px;
}
.room-title .lotterylive .liveleft ul li.sale-stop p {
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.room-title .lotterylive .liveleft ul li:first-child {
  width: 30px;
  height: 56px;
}
.room-title .lotterylive .liveleft ul li:nth-child(2) {
  font-size: 14px;
  margin-top: 10px;
  min-width: 130px;
}
.room-title .lotterylive .liveleft ul li:nth-child(2) span:nth-child(1) span{
  color: #448ed0;
}
.room-title .lotterylive .liveleft ul li:nth-child(2)>span {
  display: block;
}
.room-title .lotterylive .liveleft ul li.timers {
  margin-top: 10px;
}
.room-title .lotterylive .liveleft ul li.timers span {
  display: inline-block;
  width: 24.3px;
  height: 36px;
  background-color: #222222;
  color: white;
  font-size: 27px;
  line-height: 36px;
  text-align: center;
  font-weight: 700;
  border-radius: 2.4px;
}
.room-title .lotterylive .liveleft ul li.timers span.pointS {
  /* margin-right: 6px */
  width: 8px;
  height: 20px;
  line-height: 0;
  background-color: #fff;
  color: #222;
  position: relative;
  left: -2px;
}
.room-title .lotterylive .liveleft ul li.timers span.pointS > a {
  color: #222;
  position: absolute;
  line-height: 0;
  top: 15px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #222;
  margin: 0;
  font-size: 0;
  padding: 0;
}
.room-title .lotterylive .liveleft ul li.timers span.pointS > a:nth-child(1) {
  top: 0px;
}
.room-title .lotterylive .liveleft ul li.timers span.pointS > a:nth-child(1) {
  bottom: 0px;
}
.room-title .lotterylive .liveright {
  position: relative;
  float: right;
  height: 100%;
}
.room-title .lotterylive .liveright ul {
  height: 100%;
}
.room-title .lotterylive .liveright ul li:first-child {
  font-size: 15px;
}
.room-title .lotterylive .liveright ul li:first-child > span {
  display: block;
  line-height: 20px;
}
.blueText {
  color: #448ed0;
}
.sbht {
  margin-right: 8px;
}
.room-title .lotterylive .liveright {
  position: relative;
  line-height: 55px;
  padding-right: 30px;
}
.room-title .lotterylive .liveright .thenumber {
  cursor: pointer;
  display: flex;
  align-items: center;
}
.theresult {
  position: absolute;
  width: 100%;
  background-color: white;
  top: 56px;
  z-index: 9;
  overflow: hidden;
  height: 560px;
  box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.2);
}
.slide-leave-active,
.slide-enter-active {
  transition: all 0.5s ease;
}
.slide-leave-active,
.slide-enter {
  height: 0px !important;
}
.slide-leave,
.slide-enter-active {
  height: 560px;

}
.theresult .resultlist li {
  position: relative;
  width: 100%;
  height: 56px;
  box-sizing: border-box;
  justify-content: space-around;
  display: flex;
  align-items: center;
  margin-top: 0;
  padding-right: 30px;
  box-shadow: 0 1px 0 0 #eeeeee;
}
.theresult .resultlist li .periods {
  font-size: 14px;
  line-height: 56px;
}
.number {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.theresult .resultlist li .number span {
  display: inline-block;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  line-height: 34px;
  border: solid 1px #448ed0;
  border-radius: 50%;
  text-align: center;
  color: #448ed0;
  font-size: 18px;
  font-weight: bold;
}
.theresult .resultlist li .number .sum {
  color: white;
  background: #000;
  border-color: #000;
}
.theresult .resultlist li > em {
  position: absolute;
  right: 10px;
  top: 25px;
  width: 12px;
  height: 9px;
  /* background: url("../../../assets/images/spirt.png") 0 15px; */
}
span {
  display: inline-block;
}
.clNum {
  border-radius: 50%;
  border: 1px solid #448ed0;
  color: #448ed0;
  text-align: center;
  line-height: 34px;
  width: 36px;
  height: 36px;
  font-weight: bold;
  font-size: 18px;
  overflow: hidden;
}
.rorateStyle {
  transform: rotate(180deg);
}
.sanjiao {
  position: absolute;
  right: 30px;
  top: 23px;
  width: 12px;
  height: 9px;
  /* background: url("../../../assets/images/spirt.png") 0 15px; */
  transition: all 1s;
}
.roomLogo {
  width: 36px;
  height: 36px;
}
.ivu-dropdown-item {
  width: 100%;
  margin: 0px !important;
  padding: 15px 30px;
  text-align: center;
}
.ivu-dropdown-menu {
  margin: 0px !important;
  height: auto !important;
}
.ivu-select-dropdown {
  padding: 0px;
}
.ivu-dropdown-item:hover {
  background: #f3596a;
  color: white;
}
.fuhao {
  position: relative;
  font-size: 18px;
  display: block;
  margin: 0px 5px;
}
.jgNum {
  text-align: center;
  border-radius: 50%;
  line-height: 36px;
  width: 36px;
  height: 36px;
  color: white;
  font-size: 18px;
  font-weight: bold;
  background: #000;
  overflow: hidden;
}
.pk10 > span {
  display: inline-block;
  /* width:32px;
  height:32px; 
  background:rgba(74,144,226,1);
  border-radius: 2px ; 
  line-height: 32px;
  text-align: center;
  margin-top: 10px;
  font-size: 19px; */
}
.greenBg {
  background: #2ca42d;
  border-color: #2ca42d;
}
.blueBg {
  background: #448ed0;
  border-color: #448ed0;
}
.redBg {
  background: #d12336;
  border-color: #d12336;
}
.blackBg {
  background: #2e2e2e;
  border-color: #2e2e2e;
}
.px-01 {
  background-position: -58px -341px;
}
.px-02 {
  background-position: -58px -303px;
}
.px-03 {
  background-position: -58px -265px;
}
.px-04 {
  background-position: -58px -227px;
}
.px-05 {
  background-position: -58px -189px;
}
.px-06 {
  background-position: -58px -152px;
}
.px-07 {
  background-position: -58px -114px;
}
.px-08 {
  background-position: -58px -76px;
}
.px-09 {
  background-position: -58px -38px;
}
.px-10 {
  background-position: -58px -0px;
}
.px-01,
.px-02,
.px-03,
.px-04,
.px-05,
.px-06,
.px-07,
.px-08,
.px-09,
.px-10 {
  width: 34px !important;
  height: 34px !important;
  margin-right: 2px !important;
  /* background-image: url(../../../assets/images/spirt.png) !important; */
  background-repeat: no-repeat;
  border-radius: 0% !important;
}
.nomalUl {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nomalUl li {
  margin-right: 30px;
}
.nnKjjg {
  position: relative;
  float: right;
  display: flex;
  justify-content: flex-end;
  height: 100%;
  align-items: center;
}
.nnKjjg > ul {
  margin-right: 20px;
}
.nnKjjg > ul li span {
  display: block;
}
.niuniuPanel {
  width: 520px;
  display: flex;
  justify-content: space-between;
  height: 100%;
  position: relative;
  cursor: pointer;
}
.niuniuPanel > p {
  position: absolute;
  top: 10px;
  width: 100%;
  z-index: 98;
}
.niuniuPanel > p img {
  display: block;
  margin: 0 auto;
  height: 30px;
}
.niuniuPanel > div {
  width: 50%;
  height: 100%;
  position: relative;
}
.blueLeft {
  background: #162033;
  padding: 5px 30px 5px 50px;
}
.blueLeft > img {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  transform: rotate(270deg);
}
.blueLeft > span {
  color: #5786eb;
  position: absolute;
  top: 5px;
  left: 30px;
}
.redRight {
  background: #681313;
  padding: 5px 50px 5px 30px;
}
.redRight > span {
  color: #eb7057;
  position: absolute;
  top: 5px;
  right: 30px;
}
.redRight > img:last-child {
  position: absolute;
  bottom: 8px;
  right: 5px;
  width: 14px;
}
.redRight > img:first-child {
  position: absolute;
  right: 0;
  top: 0;
  width: 30px;
}
.niuniuPanel > div > div {
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-between;
}
.niuniuPanel > div > div > div {
  background-size: 100% 100%;
  width: 18%;
  height: 100%;
}
.niuniuPanel > div > div > p {
  position: absolute;
  bottom: -3px;
  width: 100%;
  z-index: 9;
}
.niuniuPanel > div > div > p > span {
  display: block;
  margin: 0 auto;
  /* background: url("../../../assets/images/niuniu/niuniu_lab_icon@2x.png")no-repeat; */
  background-size: 100% 100%;
  width: 100px;
  text-align: center;
  color: #d22727;
  line-height: 28px;
  font-weight: bold;
}
.rorateImg1 {
  transform: rotate(180deg);
  transition: transform 1s;
}
.rorateImg {
  transform: rotate(360deg);
}
.nnResult {
  position: absolute;
  width: 100%;
  background-color: white;
  top: 56px;
  z-index: 98;
  overflow: hidden;
  height: 300px;
  box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.2);
}
.nnResult li {
  display: flex;
  justify-content: space-between;
  height: 60px;
  align-items: center;
  padding: 0px 5%;
  border-bottom: 1px solid #eeeeee;
}
.redText {
  color: #f3596a;
}
.nnResult li > div {
  display: flex;
  justify-content: space-between;
  width: 200px;
  height: 80%;
}
.nnResult li > div div {
  width: 18%;
  height: 100%;
  background-size: 100% 100%;
}

/* 六合彩 */
.lhcPanel {
  position: relative;
  float: right;
  display: flex;
  justify-content: flex-end;
  height: 100%;
  align-items: center;
  padding-right: 70px;
  padding-left: 20px;
  cursor: pointer;
  font-size: 15px;
}
.lhcPanel > ul {
  margin-right: 20px;
}
.lhcPanel > ul li span {
  display: block;
}
.colorPanel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 250px;
}
.sbPanel{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 230px;
}
.sbPanel>div:first-child{width: 105px;display: flex;justify-content: space-between;}
.sbPanel>div:last-child{width: 110px;}
.colorBox {
  text-align: center;
}
.colorBox>div:first-child{font-size: 14px;}
.jiaHao {
  font-weight: bold;
}
.cszBox {
  border-radius: 50%;
  border: 1px solid #c7c7c7;
  text-align: center;
  width: 25px;
  height: 25px;
  line-height: 25px;
  box-sizing: border-box;
  font-weight: bold;
  display: block;
  overflow: hidden;
}
.lhcResult {
  position: absolute;
  background-color: white;
  top: 56px;
  z-index: 9;
  overflow: hidden;
  box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  left: 0px;
  height: 360px;
}
.sbResult{height: 600px;}
.lhcResult li {
  display: flex;
  justify-content: space-between;
  height: 60px;
  align-items: center;
  border-bottom: 1px solid #eeeeee;
  padding-left: 20px;
  padding-right: 70px;
}
/* redBox */
.cszBox1,
.cszBox2,
.cszBox7,
.cszBox8,
.cszBox12,
.cszBox13,
.cszBox18,
.cszBox19,
.cszBox23,
.cszBox24,
.cszBox29,
.cszBox30,
.cszBox34,
.cszBox35,
.cszBox40,
.cszBox45,
.cszBox46 {
  color: #ff382c;
  border-color: #ff382c;
}
.checkedStyle .cszBox1,
.checkedStyle .cszBox2,
.checkedStyle .cszBox7,
.checkedStyle .cszBox8,
.checkedStyle .cszBox12,
.checkedStyle .cszBox13,
.checkedStyle .cszBox18,
.checkedStyle .cszBox19,
.checkedStyle .cszBox23,
.checkedStyle .cszBox24,
.checkedStyle .cszBox29,
.checkedStyle .cszBox30,
.checkedStyle .cszBox34,
.checkedStyle .cszBox35,
.checkedStyle .cszBox40,
.checkedStyle .cszBox45,
.checkedStyle .cszBox46 {
  color: white;
  background: #ff382c;
  border: 1px solid #ff382c;
}
/* blueBox */
.cszBox3,
.cszBox4,
.cszBox9,
.cszBox10,
.cszBox14,
.cszBox15,
.cszBox20,
.cszBox25,
.cszBox26,
.cszBox31,
.cszBox36,
.cszBox37,
.cszBox41,
.cszBox42,
.cszBox47,
.cszBox48 {
  color: #008cf7;
  border-color: #008cf7;
}
.checkedStyle .cszBox3,
.checkedStyle .cszBox4,
.checkedStyle .cszBox9,
.checkedStyle .cszBox10,
.checkedStyle .cszBox14,
.checkedStyle .cszBox15,
.checkedStyle .cszBox20,
.checkedStyle .cszBox25,
.checkedStyle .cszBox26,
.checkedStyle .cszBox31,
.checkedStyle .cszBox36,
.checkedStyle .cszBox37,
.checkedStyle .cszBox41,
.checkedStyle .cszBox42,
.checkedStyle .cszBox47,
.checkedStyle .cszBox48 {
  color: white;
  background: #008cf7;
  border: 1px solid #008cf7;
}
/* greenBox */
.cszBox5,
.cszBox6,
.cszBox11,
.cszBox16,
.cszBox17,
.cszBox21,
.cszBox22,
.cszBox27,
.cszBox28,
.cszBox32,
.cszBox33,
.cszBox38,
.cszBox39,
.cszBox43,
.cszBox44,
.cszBox49 {
  color: #00a751;
  border-color: #00a751;
}
.checkedStyle .cszBox5,
.checkedStyle .cszBox6,
.checkedStyle .cszBox11,
.checkedStyle .cszBox16,
.checkedStyle .cszBox17,
.checkedStyle .cszBox21,
.checkedStyle .cszBox22,
.checkedStyle .cszBox27,
.checkedStyle .cszBox28,
.checkedStyle .cszBox32,
.checkedStyle .cszBox33,
.checkedStyle .cszBox38,
.checkedStyle .cszBox39,
.checkedStyle .cszBox43,
.checkedStyle .cszBox44,
.checkedStyle .cszBox49 {
  color: white;
  background: #00a751;
  border: 1px solid #00a751;
}

/* 幸运28 */
.checkedStyle .xyCszBox {
  background: #000;
  color: white;
  border-color: #000;
}

.checkedStyle .xyCszBox03,
.checkedStyle .xyCszBox06,
.checkedStyle .xyCszBox09,
.checkedStyle .xyCszBox12,
.checkedStyle .xyCszBox15,
.checkedStyle .xyCszBox18,
.checkedStyle .xyCszBox21,
.checkedStyle .xyCszBox24 {
  color: white !important;
  background: #ff382c !important;
  border-color: #ff382c !important;
}

.checkedStyle .xyCszBox02,
.checkedStyle .xyCszBox05,
.checkedStyle .xyCszBox08,
.checkedStyle .xyCszBox11,
.checkedStyle .xyCszBox17,
.checkedStyle .xyCszBox20,
.checkedStyle .xyCszBox23,
.checkedStyle .xyCszBox26 {
  color: white !important;
  background: #008cf7 !important;
  border-color: #008cf7 !important;
}

.checkedStyle .xyCszBox01,
.checkedStyle .xyCszBox04,
.checkedStyle .xyCszBox07,
.checkedStyle .xyCszBox10,
.checkedStyle .xyCszBox16,
.checkedStyle .xyCszBox19,
.checkedStyle .xyCszBox22,
.checkedStyle .xyCszBox25 {
  color: white !important;
  background: #00a751 !important;
  border-color: #00a751 !important;
}
/* 扑克url */
.nomalPai {
  /* background: url("../../../assets/images/niuniu/poker_default@2x.png")no-repeat; */
}
@keyframes roratePai {
  100% {
    transform: rotateY(360deg);
  }
}
.roratePai {
  animation: roratePai 1s forwards;
}
.poker1_1 {
  /* background: url("../../../assets/images/niuniu/poker1_1@2x.png")no-repeat; */
}
.poker1_2 {
  /* background: url("../../../assets/images/niuniu/poker1_2@2x.png")no-repeat; */
}
.poker1_3 {
  /* background: url("../../../assets/images/niuniu/poker1_3@2x.png")no-repeat; */
}
.poker1_4 {
  /* background: url("../../../assets/images/niuniu/poker1_4@2x.png")no-repeat; */
}
.poker2_1 {
  /* background: url("../../../assets/images/niuniu/poker2_1@2x.png")no-repeat; */
}
.poker2_2 {
  /* background: url("../../../assets/images/niuniu/poker2_2@2x.png")no-repeat; */
}
.poker2_3 {
  /* background: url("../../../assets/images/niuniu/poker2_3@2x.png")no-repeat; */
}
.poker2_4 {
  /* background: url("../../../assets/images/niuniu/poker2_4@2x.png")no-repeat; */
}
.poker3_1 {
  /* background: url("../../../assets/images/niuniu/poker3_1@2x.png")no-repeat; */
}
.poker3_2 {
  /* background: url("../../../assets/images/niuniu/poker3_2@2x.png")no-repeat; */
}
.poker3_3 {
  /* background: url("../../../assets/images/niuniu/poker3_3@2x.png")no-repeat; */
}
.poker3_4 {
  /* background: url("../../../assets/images/niuniu/poker3_4@2x.png")no-repeat; */
}
.poker4_1 {
  /* background: url("../../../assets/images/niuniu/poker4_1@2x.png")no-repeat; */
}
.poker4_2 {
  /* background: url("../../../assets/images/niuniu/poker4_2@2x.png")no-repeat; */
}
.poker4_3 {
  /* background: url("../../../assets/images/niuniu/poker4_3@2x.png")no-repeat; */
}
.poker4_4 {
  /* background: url("../../../assets/images/niuniu/poker4_4@2x.png")no-repeat; */
}
.poker5_1 {
  /* background: url("../../../assets/images/niuniu/poker5_1@2x.png")no-repeat; */
}
.poker5_2 {
  /* background: url("../../../assets/images/niuniu/poker5_2@2x.png")no-repeat; */
}
.poker5_3 {
  /* background: url("../../../assets/images/niuniu/poker5_3@2x.png")no-repeat; */
}
.poker5_4 {
  /* background: url("../../../assets/images/niuniu/poker5_4@2x.png")no-repeat; */
}
.poker6_1 {
  /* background: url("../../../assets/images/niuniu/poker6_1@2x.png")no-repeat; */
}
.poker6_2 {
  /* background: url("../../../assets/images/niuniu/poker6_2@2x.png")no-repeat; */
}
.poker6_3 {
  /* background: url("../../../assets/images/niuniu/poker6_3@2x.png")no-repeat; */
}
.poker6_4 {
  /* background: url("../../../assets/images/niuniu/poker6_4@2x.png")no-repeat; */
}
.poker7_1 {
  /* background: url("../../../assets/images/niuniu/poker7_1@2x.png")no-repeat; */
}
.poker7_2 {
  /* background: url("../../../assets/images/niuniu/poker7_2@2x.png")no-repeat; */
}
.poker7_3 {
  /* background: url("../../../assets/images/niuniu/poker7_3@2x.png")no-repeat; */
}
.poker7_4 {
  /* background: url("../../../assets/images/niuniu/poker7_4@2x.png")no-repeat; */
}
.poker8_1 {
  /* background: url("../../../assets/images/niuniu/poker8_1@2x.png")no-repeat; */
}
.poker8_2 {
  /* background: url("../../../assets/images/niuniu/poker8_2@2x.png")no-repeat; */
}
.poker8_3 {
  /* background: url("../../../assets/images/niuniu/poker8_3@2x.png")no-repeat; */
}
.poker8_4 {
  /* background: url("../../../assets/images/niuniu/poker8_4@2x.png")no-repeat; */
}
.poker9_1 {
  /* background: url("../../../assets/images/niuniu/poker9_1@2x.png")no-repeat; */
}
.poker9_2 {
  /* background: url("../../../assets/images/niuniu/poker9_2@2x.png")no-repeat; */
}
.poker9_3 {
  /* background: url("../../../assets/images/niuniu/poker9_3@2x.png")no-repeat; */
}
.poker9_4 {
  /* background: url("../../../assets/images/niuniu/poker9_4@2x.png")no-repeat; */
}
.poker10_1 {
  /* background: url("../../../assets/images/niuniu/poker10_1@2x.png")no-repeat; */
}
.poker10_2 {
  /* background: url("../../../assets/images/niuniu/poker10_2@2x.png")no-repeat; */
}
.poker10_3 {
  /* background: url("../../../assets/images/niuniu/poker10_3@2x.png")no-repeat; */
}
.poker10_4 {
  /* background: url("../../../assets/images/niuniu/poker10_4@2x.png")no-repeat; */
}
.poker11_1 {
  /* background: url("../../../assets/images/niuniu/poker11_1@2x.png")no-repeat; */
}
.poker11_2 {
  /* background: url("../../../assets/images/niuniu/poker11_2@2x.png")no-repeat; */
}
.poker11_3 {
  /* background: url("../../../assets/images/niuniu/poker11_3@2x.png")no-repeat; */
}
.poker11_4 {
  /* background: url("../../../assets/images/niuniu/poker11_4@2x.png")no-repeat; */
}
.poker12_1 {
  /* background: url("../../../assets/images/niuniu/poker12_1@2x.png")no-repeat; */
}
.poker12_2 {
  /* background: url("../../../assets/images/niuniu/poker12_2@2x.png")no-repeat; */
}
.poker12_3 {
  /* background: url("../../../assets/images/niuniu/poker12_3@2x.png")no-repeat; */
}
.poker12_4 {
  /* background: url("../../../assets/images/niuniu/poker12_4@2x.png")no-repeat; */
}
.poker13_1 {
  /* background: url("../../../assets/images/niuniu/poker13_1@2x.png")no-repeat; */
}
.poker13_2 {
  /* background: url("../../../assets/images/niuniu/poker13_2@2x.png")no-repeat; */
}
.poker13_3 {
  /* background: url("../../../assets/images/niuniu/poker13_3@2x.png")no-repeat; */
}
.poker13_4 {
  /* background: url("../../../assets/images/niuniu/poker13_4@2x.png")no-repeat; */
}
.redBoxPanel {
  display: flex;
  align-items: center;
}
.redBoxPanel > span {
  overflow: hidden;
  background: #d12336;
  width: 36px;
  height: 36px;
  line-height: 36px;
  border-radius: 50%;
  text-align: center;
  color: white;
  font-size: 18px;
  font-weight: bold;
  margin: 0px 5px;
}

/* 骰宝 */
.sbBox{width: 30px;height: 30px;background-size: 100% 100% !important;}
/* .sbBox1{background: url(../../../assets/images/shaibao/dice-1.png)no-repeat}
.sbBox2{background: url(../../../assets/images/shaibao/dice-2.png)no-repeat}
.sbBox3{background: url(../../../assets/images/shaibao/dice-3.png)no-repeat}
.sbBox4{background: url(../../../assets/images/shaibao/dice-4.png)no-repeat}
.sbBox5{background: url(../../../assets/images/shaibao/dice-5.png)no-repeat}
.sbBox6{background: url(../../../assets/images/shaibao/dice-6.png)no-repeat} */
</style>
<style>
.headerleft .ivu-select-dropdown {
  width: auto;
}
</style>



// WEBPACK FOOTER //
// src/components/room/roomTitle/roomTitle.vue